<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //全选
        function onclickFun_1() {
            //获取标签对象，通过name值获取
            /**
             *  getElementsByName():通过name值获取对象，其返回值为一个对象集合，顺序是就是原本html中从上到下排列顺序，从0开始索引
             *  checked:用来表示多选框的某个选项已选中，前提是给他赋true值，赋false表示取消选中
             * @type {NodeListOf<HTMLElement>}
             */
            var demo=document.getElementsByName("兴趣爱好");//注意这个标签对象demo是一个对象集合
            for (var i=0;i<demo.length;i++){
                demo[i].checked=true;
            }
        }
        //全不选
        function onclickFun_2() {
            //获取标签对象，通过name值获取
            /**
             *  getElementsByName():通过name值获取对象，其返回值为一个对象集合，顺序是就是原本的排列顺序，从0开始索引
             *  checked:用来表示多选框的某个选项已选中，前提是给他赋true值，赋false表示取消选中
             * @type {NodeListOf<HTMLElement>}
             */
            var demo=document.getElementsByName("兴趣爱好");//注意这个标签对象demo是一个对象集合
            for (var i=0;i<demo.length;i++){
                demo[i].checked=false;
            }

        }
        //反选
        function onclickFun_3() {
            //获取标签对象，通过name值获取
            /**
             *  getElementsByName():通过name值获取对象，其返回值为一个对象集合，顺序是就是原本的排列顺序，从0开始索引
             *  checked:用来表示多选框的某个选项已选中，前提是给他赋true值，赋false表示取消选中
             * @type {NodeListOf<HTMLElement>}
             */
            var demo=document.getElementsByName("兴趣爱好");//注意这个标签对象demo是一个对象集合
            for (var i=0;i<demo.length;i++){
                // 方式一：
                // if(demo[i].checked){
                //     demo[i].checked=false;
                // }else{
                //     demo[i].checked=true;
                // }

                // 方式二：
                demo[i].checked=!demo[i].checked;//给原本的checked的值赋相反值就ok了
            }
        }
    </script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="兴趣爱好" value="Java"/>Java
    <input type="checkbox" name="兴趣爱好" value="C语言"/>C语言
    <input type="checkbox" name="兴趣爱好" value="C++"/>C++<br/>
    <button onclick="onclickFun_1()">全选</button>
    <button onclick="onclickFun_2()">全不选</button>
    <button onclick="onclickFun_3()">反选</button>
</body>
</html>